<template>
  <div class="content">
    <el-upload
      list-type="picture"
      :action="actionURL"
      ref="upload"
      :headers="headers"
      :data="uploadData"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload"
      :show-file-list="true"
      :auto-upload="false"
      :limit=1
      >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      token: undefined,
      headers: {},
      uploadData: {},
      actionURL: '',

    }
  },
  mounted() {
    this.token = this.$cookie.get('token')
    this.headers.token = this.token
    this.actionURL = this.$http.adornUrl('/fileAction/uploadFile3')
  },
  methods: {
    uploadSuccess(file) {
      if (file.code == 0) {
        this.$cookie.set('uploadFileId', file.fileId)
      } else {
        this.$message({
          message: file.msg,
          type: 'warning',
          center: true
        })
      }
    },
    uploadError() {
      this.$message({
        message: '上传失败！请重新上传！',
        type: 'warning',
        center: true
      })
    },
    beforeUpload(file) {
      this.uploadData = {
        mark: '单文件上传',
        file: file
      }
      console.log(file)
      console.log(this.uploadData)
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    clearHistory(){
        this.$cookie.delete('uploadFileId')
        this.$refs.upload.clearFiles()
    }
  }
}
</script>

<style scoped>

</style>
